<template>
  <div >
    <zh-row :span="24" :gutter="[16,16]">
      <zh-col :span="16">
      </zh-col>
      <zh-col :span="8" >
        <div>
          <span class="title-size1" >全市/全区进度： </span>
          <ep-progress
              width="200px"
              :percent=this.wcl
          />
        </div>

      </zh-col>
      <zh-col>
        <zh-table  ref="personTable" title="排查完成情况" row-id="roleId" :url="tableUrl" height="400px" size="medium" :columns="tableColumn" >
          <template #operate="{ row }">
            <div class="alert-message">
              <i class="fa fa-exclamation-circle alert-message-icon"></i>
              <span class="alert-message-content">
              <ep-button status="primary" @click=showJDRanking(row)>查看</ep-button>
<!--                 <ep-progress width="100px" :percent=row.wcl></ep-progress>-->
            </span>
            </div>
          </template>
          <template #wcl="{ row }">
            <div class="alert-message">
              <i class="fa fa-exclamation-circle alert-message-icon"></i>
              <span class="alert-message-content">
                <ep-progress width="150px" :percent=row.wcl></ep-progress>
            </span>
            </div>
          </template>
        </zh-table>

        <a-modal
            title="街道排行"
            centered
            style=""
            width="85%"
            destroyOnClose
            :mask-closable="false"
            v-model="visible"
            @cancel="handleCancel"
        >
          <check-tasks-ranking-form ref="checkTasksRankingForm" @handleCancel="handleCancel" @showOrHide ="showOrHide"></check-tasks-ranking-form>
          <template slot="footer">
            <a-button @click="handleCancel">关闭</a-button>
          </template>
        </a-modal>
      </zh-col>
    </zh-row>
  </div>
</template>
<script>
import {getTaskCheckCompeletion,getTaskCheckCompeletionRate} from "@/services/system/whdngxlApi"
import moment from 'moment'
export default {
  name: 'CheckTasksRankingForm',
  components: {
  },
  data() {
    return {
      dictData: {},
      queryParam: {
        c0301:''},
      tableColumn: [],
      tableColumnXQ: [
        // {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '排名'},
        {field: 'rank', title: '排名', align: 'center', fixed: 'left',},
        {field: 'b0122', title: '县市区编码',visible: false, align: 'center', fixed: 'left',},
        {field: 'b0107', title: '县市区', align: 'center', fixed: 'left',},
        {field: 'yxhs', title: '已排查数',sortable:true, align: 'center',  },
        {field: 'wxhs', title: '未排查数',sortable:true, align: 'center',},
        {field: 'yxhs', title: '修改数',sortable:true, align: 'center',},
        {field: 'hxs', title: '核销数',sortable:true, align: 'center',},
        {
          field: 'wcl', title: '完成率',  align: 'center', width: 200, slots: {
            // 使用插槽模板渲染
            default: 'wcl'
          }
        },
        {
          field: 'operate', title: '街道任务排名', fixed: 'right', align: 'center', width: 120, slots: {
            // 使用插槽模板渲染
            default: 'operate'
          }
        },
      ],
      tableColumnJD: [
        // {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '排名'},
        {field: 'rank', title: '排名', align: 'center', fixed: 'left',},
        {field: 'b0122', title: '街道编码',visible: false, align: 'center', fixed: 'left',},
        {field: 'b0107', title: '街道', align: 'center', fixed: 'left',},
        {field: 'yxhs', title: '已排查数',sortable:true, align: 'center',  },
        {field: 'wxhs', title: '未排查数',sortable:true, align: 'center',},
        {field: 'yxhs', title: '修改数',sortable:true, align: 'center',},
        {field: 'hxs', title: '核销数',sortable:true, align: 'center',},
        // {field: 'wcl', title: '完成率',sortable:true, align: 'center',}
        {
          field: 'wcl', title: '完成率', align: 'center', width: 200, slots: {
            // 使用插槽模板渲染
            default: 'wcl'
          }
        }
      ],
      tableData: [],
      tableUrl: getTaskCheckCompeletion,
      toolbarConfig: {
        custom: true,
        slots: {}
      },
      wcl:0,//完成率
      manageRate:'',
      visible: false,
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    moment,
    initData(row,manageRate){
      this.manageRate = manageRate
      //manageRate 管理员等级，2：市级 3：县级 县级管理员直接就看到改所属平台的街道排名
      //而市级管理员还需要根据任务的范围来决定显示县区排名还是街道排名
      if(this.manageRate == "3"){
        this.tableColumn = this.tableColumnJD
      }
      //市级管理员如何显示，需要通过后台接口判断
      this.getTaskCheckCompeletionRate(row)
      this.findList(row)

    },
    findList(row) {
      this.queryParam.c0301 = row.c0301
      if(row.b0122){
        this.queryParam.b0122 = row.b0122
      }
      this.$refs.personTable.query(this.queryParam)
    },
    getTaskCheckCompeletionRate(row){
      const params = {}
      params.c0301 = row.c0301
      if(row.b0122){
        this.queryParam.b0122 = row.b0122
      }
      this.$http.post(getTaskCheckCompeletionRate, params).then(res => {
        this.wcl =  Number( res.result.wcl)
        //市级管理员有该标志，直接显示街道
        if(this.manageRate == "2"){
          if(res.result.viewFlag){
            this.tableColumn = this.tableColumnJD
          }else{
            this.tableColumn = this.tableColumnXQ
          }
        }
      })
    },
    showJDRanking(row){
      this.showOrHide()
      this.$nextTick(()=>{
        this.$refs.checkTasksRankingForm.initData(row,"3");
      })
    },
    handleCancel() {
      this.visible=false
    },
    showOrHide() {
      this.visible=!this.visible
    },

  },
  watch: {
  }
}
</script>
<style lang="less" scoped>
.title-size1 {
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: rgb(36, 102, 208);
  font-weight: 600;
}
</style>